<template>
  <div class="container">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3ACE8A">
        <van-swipe-item v-for="(image, index) in data.imgs" :key="index">
          <img :src="'http://jmcshop.xxcf.net/' + image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="name">{{ data.name }}</div>
      <div class="number">商品编号：{{ data.goods_num }}</div>
      <div class="mouny">
        <div>{{ this.data.type == 0 ? "买入价格：" : "售出价格：" }}</div>
        <div class="text">
          ￥<span>{{ data.price }}</span>
        </div>
      </div>
      <div class="stock">
        库存数量：{{ data.kucun }}
        <!-- <van-stepper v-model="data.stock" theme="round" min="1" integer /> -->
      </div>
    </div>

    <div class="comContent">
      <div class="comTitle">商品详情</div>
      <div style="margin-top: 20px" v-html="data.content"></div>
    </div>

    <div class="buttonList">
      <div @click="returnFn">返回列表</div>
      <!-- <div @click="addFn">{{ this.data.type == 0 ? "上架商品" : "取消上架" }}</div> -->
      <div @click="addFn" v-if="data.status == 0">委托代卖</div>
      <!-- <div @click="addFn" v-if="data.status == 2">取消委托</div> -->
    </div>
  </div>
</template>

<script>
import { getGoodInfo, imgUrl } from '../../api/api'
export default {
  data() {
    return {
      data: {},
    };
  },
  methods: {
    getNum() {
      console.log(this.data.stock);
    },
    returnFn() {
      this.$router.go(-1);
    },
    addFn() {
      if(this.data.type == 0) {
        this.$router.push({
          path: `/goods`,
          query: {
            goods_id: this.$route.query.goods_id
          }
        })
      } else {
        this.$toast.success('取消成功');
      }
    },
    getInfo() {
      const data = {
        user_id: localStorage.getItem("userId"),
        goods_id: this.$route.query.goods_id
      }
      getGoodInfo(data).then(res => {
        this.$toast.clear()
        res.data.imgs = res.data.imgs.split(',')
        this.data = res.data
        console.log('商品详情---', this.data)
      })
    }
  },
  mounted() {
    this.getInfo()
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  .swiper {
    width: 100%;
    height: 250px;

    .my-swipe {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 3%;

    .name {
      margin-top: 20px;
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 1.1em;
      color: #000;
    }
    .number {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
    }
    .mouny {
      margin-top: 30px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        color: #dd0000;

        span {
          margin-left: 5px;
          font-size: 3em;
          font-weight: 700;
        }
      }
    }
    .stock {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .comContent {
    width: 100%;
    padding: 0 3%;

    .comTitle {
      margin-top: 20px;
      color: #333333;
      font-size: 1em;
      letter-spacing: 0.5px;
    }
  }
  .buttonList {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      letter-spacing: 1px;
      font-size: 1em;
    }

    div:nth-child(1) {
      background-color: #fff;
      border-top: 1px solid #ece7e7;
      color: #3ace8a;
    }

    div:nth-child(2) {
      background-color: #3ace8a;
      color: #fff;
    }
  }
}
</style>